* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
#root {
    width: 100%;
    height: 100%;
    background: #e7eaee;

    .home {
        width: 100%;
        height: 100%;

        header {
            width: 100%;
            height: 64px;
            background: #fff;

            nav {
                width: 1140px;
                height: 100%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                h1 {
                    width: 36px;
                    margin-right: 50px;

                    img {
                        width: 36px;
                        height: 36px;
                    }
                }

                ul {
                    display: flex;

                    li {
                        width: 64px;
                        margin-right: 20px;

                        a {
                            text-decoration: none;
                            color: #000;
                        }
                        a:hover{
                            color: red;
                        }
                    }
                    
                }

                ol {
                    display: flex;
                    margin-left: 550px;
                    li {
                        width: 64px;
                        margin-right: 20px;
                        @keyframes turnZ {
                            0%{
                                transform: rotateZ(0deg);
                            }
                            100%{
                                transform: rotateZ(360deg);
                            }
                        }
                        svg {
                            width: 24px;
                            height: 24px;
                        }
                        
                    }
                    li:nth-child(1) svg:hover{
                        fill: red;
                    }
                    li:nth-child(2) svg:hover{
                           animation-name: turnZ;
                            animation-duration: 3s;
                            animation-iteration-count: 1;
                    }
                    li:nth-child(3) svg:hover{
                        fill: red;
                    }
                }
            }

        }
        main{
            width: 100%;
            height: calc(100% - 64px);
            .articles{
                width: 1140px;
                height: 100%;
                margin: 0 auto;
                display: flex;
                .articleft{
                    width: 804px;
                    height: 100%;
                    background: salmon;
                    margin: 10px 10px 0px 0px;
                }
                .articleright{
                    width: 320px;
                    height: 533px;
                    background: aqua;
                    margin: 10px 0px 0px 0px;
                }
                
            }
        }
    }
}